<script lang="js" setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { login } from '@/api/userApi'

  // 定义路由对象
  let router = useRouter()

  // 定义登录的信息
  let objForm = ref({
    username: '',
    password: ''
  })

  function userLogin() {
    if (this.objForm.username == '') {
      alert('用户名不能为空，请重新输入')
      return
    }

    if (this.objForm.password == '') {
      alert('密码不能为空，请重新输入')
      return
    }

    // 请求后端服务
    login(this.objForm)
      .then(res => {
        console.log(res)

        // 判断返回的编码
        if (res.code == '200') {
          // 获取用户的口令（有了口令才能在网络中传递）
          let token=res.token 
          //-:将token保存到本地绘画
          sessionStorage.setItem("token",token)
          //-:获取用户对应的菜单功能
          sessionStorage.setItem("menuList",JSON.stringify(res.data.menuList))
          //-:存储用户的真实姓名
          sessionStorage.setItem("username",res.data.nickname)
          // 跳转到主页面
          //router.push({ path: '/index' })
          //-:跳转到 角色对应菜单列表的第一个功能菜单
          router.push(res.data.menuList[0].children[0].path)
        } else {
          alert(res.message)
          return
        }
      })
  }
</script>

<template>
  <div class="login-bg">
    <div class="login">
      <div class="message">东软颐养中心</div>
      <div id="darkbannerwrap"></div>
      <form>
        <input name="username" v-model="objForm.username" placeholder="用户名" type="text" />
        <hr class="hr15" />
        <input name="password" v-model="objForm.password" placeholder="密码" type="password" />
        <hr class="hr15" />
        <input value="登录" @click="userLogin()" style="width: 100%;" type="button" />
      </form>
    </div>
  </div>
</template>

<style lang="css" scoped>
  .login-bg {
  width: 100vw;               /* 使用整个屏幕宽度 */
  height: 100vh;              /* 使用整个屏幕高度 */
  background: url(@/assets/img/logbg.jpg) no-repeat center center; /* 居中显示背景 */
  background-size: cover;     /* 背景图自适应屏幕，填充整个屏幕 */
  overflow: hidden;           /* 防止超出屏幕的内容 */
  position: fixed;            /* 背景图固定在屏幕 */
  top: 0;                     /* 定位背景图顶部对齐 */
  left: 0;                    /* 定位背景图左侧对齐 */
}


  .login {
    margin: 200px auto 0 auto;
    min-height: 420px;
    max-width: 420px;
    padding: 40px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .login .message {
    margin: 10px 0 0 -58px;
    padding: 18px 10px 18px 60px;
    background: #44aff0;
    position: relative;
    color: #fff;
    font-size: 20px;
  }

  .login #darkbannerwrap {
    width: 18px;
    height: 10px;
    margin: 0 0 20px -58px;
    position: relative;
  }

  .login input[type=password],
  .login input[type=text],
  select {
    border: 1px solid #dcdee0;
    vertical-align: middle;
    border-radius: 3px;
    height: 50px;
    padding: 0 16px;
    font-size: 14px;
    color: #555;
    outline: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .login input[type=email]:focus,
  .login input[type=file]:focus,
  .login input[type=password]:focus,
  .login input[type=text]:focus,
  select:focus {
    border: 1px solid #44aff0;
  }

  .login input[type=button],
  .login input[type=submit] {
    display: inline-block;
    vertical-align: middle;
    padding: 12px 24px;
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    background-color: #44aff0;
    border-radius: 3px;
    border: none;
    -webkit-appearance: none;
    outline: 0;
    width: 100%;
  }

  .login hr {
    background: #fff;
  }

  .login hr.hr15 {
    height: 15px;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .login hr.hr20 {
    height: 20px;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
</style>
